<template>
	<view class="container">
		<view class="bg-colore"></view>
		<view class="content">
			<view class="wrap">
				<uni-list>
					<uni-list-item title="姓名">
						<template v-slot:footer>
							<uni-easyinput v-model="data.name" placeholder="请输入姓名" :clearable="false" :trim="true"
								:inputBorder="false" class="you-input" />
						</template>
					</uni-list-item>
					<!-- <uni-list-item title="手机号码">
						<template v-slot:footer>
							<view class="you-input">
								+86
								<uni-easyinput v-model="data.phone" placeholder="在这里输入手机号" :clearable="false" :trim="true"
									:inputBorder="false" type="number" />
							</view>

						</template>
					</uni-list-item>
					<uni-list-item title="验证码">
						<template v-slot:footer>
							<view class="yzm-div">
								<uni-easyinput v-model="data.code" :maxlength="6" placeholder="输入验证码" :clearable="false" :trim="true"
									class="yzm-input" />
								<view :class="codeBtn.disabled?'yzm-btn hui':'yzm-btn'" @click="get_code">
									{{codeBtn.codeTime}}{{codeBtn.codeText}}
								</view>
							</view>
						</template>
					</uni-list-item> -->
					<uni-list-item title="公司名称">
						<template v-slot:footer>
							<uni-easyinput v-model="data.tenementName" placeholder="请输入公司名称" :clearable="false" :trim="true"
								:inputBorder="false" class="you-input" />
						</template>
					</uni-list-item>
					<uni-list-item title="公司地址">
						<template v-slot:footer>
							<uni-easyinput v-model="data.tenementAdd" placeholder="请输入公司地址" :clearable="false" :trim="true"
								:inputBorder="false" class="you-input" />
						</template>
					</uni-list-item>
				</uni-list>
			</view>
		</view>
		<view class="xiabtn">
			<view class="btncss" @click="btnclick">
				提交申请
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: {
					phone: "",
					code: "",
					name: "",
					tenementName: "",
					tenementAdd: "",
				},
				codeBtn: {
					disabled: false,
					codeTime: '',
					codeText: "发送验证码",
					codeStatus: true
				},
				flag: true
			};
		},
		onLoad(options) {
			// this.getMaterialConfig()
			// this.getArticleDetail()
			// this.getMaterialColumn()
		},
		onShow() {
			this.$public.isLoginUrl()
		},
		methods: {
			btnclick() {
				let that = this
				if (that.flag) {
					that.flag = false
					let params = that.data;
					let isguo = true
					if (!params.tenementName || !params.tenementAdd) {
						isguo = false
					}
					if (!isguo) {
						uni.showToast({
							title: '请填写完整内容',
							duration: 2000,
							icon: "error"
						});
						that.flag = true
						return false
					}
					that.addTenement()

				}
			},
			async addTenement(parentCode) {
				let params = this.data
				params.typeId = 1
				this.$public.htmlPost("/api/addTenement", params).then((res) => {
					console.log("addTenement res", res)
					let data = res.data;
					if (data.code == 0) {
						uni.showModal({
							title: '温馨提示',
							content: '申请成功，请等待管理员审核',
							showCancel: false,
							success: function(res) {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						});
						this.flag = true
					} else {
						uni.showModal({
							title: '温馨提示',
							content: res.data.msg,
							showCancel: false,
							success: function(res) {
								uni.navigateBack()
							}
						});
						this.flag = true
					}
				})
			},
			//获取验证码
			async get_code() {
				// console.log(this.customFormData.phone)
				var pphone = /^1[3456789]\d{9}$/;
				if (!pphone.test(this.data.phone)) {
					this.$api.msg('请输入正确的手机号');
					return false
				}
				this.codeBtn.disabled = true;
				this.setInterValFunc();
				// this.$api.msg("短信已发送,体验版不做验证")
				this.$public.htmlPost("/api/smsSend", {
					tel: this.data.phone,
				}).then((res) => {
					// console.log("发送短信", res)
					if (res.data.code == 0) {
						this.$api.msg("短信已发送")
					} else {
						this.$api.msg(res.data.msg)
					}
				})
			},
			setInterValFunc() {
				this.codeBtn.codeTime = 60;
				this.codeBtn.codeText = '秒';
				this.setTime = setInterval(() => {
					if (this.codeBtn.codeTime - 1 == 0) {
						this.codeBtn.codeTime = '';
						this.codeBtn.codeText = '重新获取';
						this.codeBtn.disabled = false;
						clearInterval(this.setTime);
					} else {
						this.codeBtn.codeTime--;
					}
				}, 1000);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-top: 10rpx;
	}

	.bg-colore {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: #fbfbfb;
		z-index: -1;
	}

	.content {
		background: #fff;
		box-shadow: 0 20rpx 20rpx rgba(0, 0, 0, 0.08);
		color: #333333;

		.wrap {
			padding: $uni-wrap-padding;

			/deep/.uni-list {
				.gzjl {
					.uni-list-item__container {
						align-items: normal;
					}
				}

				.scsjt {
					.uni-list-item__container {
						.uni-list-item__extra {
							flex: 3;
							justify-content: start;
						}
					}

				}

				.pz-div {

					.uni-list-item__header,
					.uni-list-item__content {
						width: 100%;

						.uni-list-item__content-note {
							margin: 20rpx 0;
						}
					}

					.headtext {
						text-align: left;
						width: 100%;
						font-size: 28rpx;

						.fukuan {
							padding-left: 20rpx;
							color: #0f6dc9;
							font-size: 32rpx;
						}
					}

				}

				.szcs {
					.uni-list-item__content {
						height: 72rpx;
						line-height: 72rpx;
					}
				}

				.sjc-upload {
					.uni-list--border {
						display: none;
					}
				}

				.xiao_upload {
					// height: 200rpx;

					.uni-list-item__container {
						align-items: center;


						.upload-css {
							width: 50%;
							height: 100%;
						}

						.uni-file-picker {
							width: 100%;
						}
					}
				}

				.uni-list-item__container {
					align-items: center;

					.uni-file-picker,
					.upload-css {
						width: 100%;

						.uni-file-picker__header {
							display: none;
							// .file-title {
							// 	span {
							// 		display: none;
							// 	}
							// }
						}
					}



					.uni-easyinput,
					.you-input {
						// text-align: right;
						flex: 3;
						display: flex;
						align-items: center;

						.uni-input-placeholder.uni-easyinput__placeholder-class {
							font-size: 22rpx;
						}

						.uni-easyinput__content-textarea {
							padding-left: 20rpx;
							padding-right: 20rpx;
						}
					}

					.yzm-input {
						width: 180rpx;
						flex: none;
					}

					.yzm-div {
						display: flex;
						justify-content: space-between;
						align-items: center;
						flex: 3;

						.yzm-btn {
							width: 230rpx;
							height: 72rpx;
							display: flex;
							align-items: center;
							color: #fff;
							justify-content: center;
							background: #DF686A;
							border-radius: 10rpx;
							font-size: 24rpx;
						}
					}


				}
			}

			/deep/.uni-forms-item {
				.uni-forms-item__inner {
					border-bottom: 2rpx solid #ebebeb;
					// margin-bottom: 44rpx;
					padding: 30rpx 0;

					.label-text {
						font-size: 28rpx;
					}

					.uni-easyinput__content-input {
						text-align: right;


					}
				}
			}

			.leixing {
				/deep/.checklist-group {
					.checklist-box {
						margin-right: 15rpx;
					}

					.checklist-text {
						span {
							color: #333333;
							font-size: 24rpx;
						}
					}
				}
			}

			.qiatan {
				/deep/.uni-list-item__extra-text {
					color: #f90404;
				}
			}

			.shuming {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				width: 100%;

				.lanming {
					color: #0f6dc9;
				}

				/deep/.uni-data-checklist {
					flex: none;

					.checklist-group .checklist-box {
						margin-right: 0;
					}

					.checklist-text {
						span {
							color: #333333;
						}
					}
				}
			}

		}
	}

	.sm-div {

		padding: $uni-wrap-padding;

		.sm-div-bg {
			background: #fff;
			padding: 40rpx;
			border-radius: 20rpx;

			.sm-title {
				font-size: 36rpx;
				text-align: center;
				// padding-bottom: 20rpx;
				color: #0f6dc9;
			}

			.sm-neirong {
				// padding: 20rpx 0;
				margin: 20rpx 0;
				max-height: 60vh;
				overflow: auto;
			}
		}
	}

	.xiabtn {
		padding: 80rpx 30rpx;
		// padding: $uni-wrap-padding;
	}

	.checkcss {
		/deep/.uni-data-checklist {
			.checklist-box {
				min-width: 180rpx;
			}
		}
	}
</style>